<!-- 排行榜 -->
<template>
    <div class="rank-page">
        <ul>
            <li class="rank-li clearfix" v-for="(item,index) in rankList" :key="index" @click="goReview(item)">
                <div class="rank-num left"><span>{{index+1}}</span></div>
                <img class="left" :src="item.Avatar ? item.Avatar: $parent.headError" :onerror="$parent.headError" alt="">
                <div class="left rank-name">{{item.TrueName}}</div>
                <div class="right rank-score">{{item.Integral}}</div>
            </li>
        </ul>
    </div>
</template>

<script>
import { axGet,axPost } from '@/api/index'

export default {
    name: "classRank",
    data(){
        return{
            rankList:[],
           
        }
    },
    watch:{
        
    },
    created(){ 
        this.$parent.menuShow=false;

        /****** 验证登录 *****/ 
		if(!sessionStorage.getItem("myInfo")){
			this.$router.replace({path:'/',query: {}});
		}else{
            this.rankList=JSON.parse(sessionStorage.getItem("thisRankLsit"))
        }
    },
    mounted(){
       
    },
    methods:{
        // 去书评详情
        goReview(item){
            this.$router.push({path:'/reviewList',query: {userid:item.UserId}});
        },
    }
}
</script>
<style type="text/css" scoped>
.rank-page{
    padding: 0.28rem 0.32rem;
}
.rank-li{
    height: 1.1rem;
    line-height: 1.1rem;
    color: #999;
}
.rank-num{
    width: 0.4rem;
    height: 0.4rem;
    line-height: 0.4rem;
    font-size: 0.26rem;
    text-align: center;
    padding: 0.35rem 0.24rem 0 0.04rem;
}
.rank-num span{
    display: block;
    border-radius: 50%;
}
.rank-li:nth-child(1) span{
    background: #ff7100;
    color: #fff;
}
.rank-li:nth-child(2) span{
    background: #ffa800;
    color: #fff;
}
.rank-li:nth-child(3) span{
    background: #85cd0d;
    color: #fff;
}
.rank-li img{
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    margin-top: 0.25rem;
}
.rank-name{
    font-size: 0.32rem;
    color: #000;
    padding-left: 0.3rem;
    width: 3.2rem;
    white-space:nowrap; 
	overflow: hidden;
	text-overflow:ellipsis;
}
.rank-score{
    font-size: 0.3rem;
    padding-right: 0.48rem;
    background: url(~@/assets/img/icon/arrow-r-n.png) no-repeat right 0 center;
    background-size: 0.16rem auto;
}
</style>